<template>
  <div class="flow-signature">
    <div class="label">电子签名<div class="p-12">&nbsp;</div></div>
    <div class="container">
      <el-radio-group
        v-model="currValue"
        @change="handleChange"
      >
        <el-radio
          v-for="item in signList"
          :key="item.id"
          :value="item.id"
        >
          <div class="image">
            <img :src="imagePath + item.signatureId" alt />
          </div>
        </el-radio>
      </el-radio-group>
      <div style="margin-left: 8px">
        <el-button
          type="primary"
          @click="openDraw"
        >新增签名</el-button>
        <el-button
          v-if="currValue && props.signatureType === '1'"
          type="danger"
          @click="deleteSign"
        >删除签名</el-button>
      </div>
    </div>

    <el-dialog
      width="500px"
      v-model="dialogVisible"
      :close-on-click-modal="false"
      append-to-body
      destroy-on-close
      draggable
      fullscreen
      class="cc-page-comp-dialog"
    >
      <template #header>
        <div class="header">
          <div class="title">画板</div>
        </div>
      </template>
      <cc-signature-pad
        v-if="dialogVisible"
        ref="signatureRef"
      />
      <template #footer>
        <el-button
          size="default"
          type="info"
          @click="dialogVisible = false"
        >取消</el-button>
        <el-button
          size="default"
          type="warning"
          @click="clearDraw"
        >清空</el-button>
        <el-button
          size="default"
          type="primary"
          @click="submitDraw"
          :loading="editLoading"
        >提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import api from "@/http/api";
import { ElMessage, ElMessageBox } from "element-plus";

const props = defineProps({
  signatureType: String
});

const imagePath = ref(import.meta.env.VITE_IMAGE_PATH);
const modelValue = defineModel();
const signList = ref([]);
const currValue = ref();

const dialogVisible = ref(false);
const editLoading = ref(false);
const signatureRef = ref();

const loadData = () => {
  if (props.signatureType !== '1') return;
  api.post('/flow/signature/queryList').then(res => {
    signList.value = res.data || [];
    for (let item of signList.value) {
      if (item.ifDefault === '1') {
        currValue.value = item.id;
        break;
      }
    }
  });
};

const handleChange = (id) => {
  if (props.signatureType !== '1') return;
  api.post('/flow/signature/default', {id: id});
};

const openDraw = () => {
  dialogVisible.value = true;
};

const clearDraw = () => {
  signatureRef.value.clearSignature();
};

const submitDraw = () => {
  const signData = signatureRef.value.saveSignature();

  if (!signData.isEmpty) {
    api.upload({base64: signData.data.split(',')[1]}).then(res => {
      if (props.signatureType === '1') {
        api.post('/flow/signature/save', {signatureId: res.data.id}).then(res1 => {
          signList.value.unshift({id: res1.data.id, signatureId: res.data.id, ifDefault: '1'})
          currValue.value = res1.data.id;
          dialogVisible.value = false;
        });
      } else {
        signList.value.unshift({id: res.data.id, signatureId: res.data.id, ifDefault: '1'})
        currValue.value = res.data.id;
        dialogVisible.value = false;
      }
    });
  } else {
    ElMessage.warning("画板内容为空！");
  }
};

const deleteSign = () => {
  if (props.signatureType !== '1') return;

  if (!currValue.value) {
    ElMessage.error("请选择要删除的签名！");
    return;
  }

  ElMessageBox.confirm('请确认是否删除此签名？', '提示', {type: 'warning'}).then(() => {
    api.post('/flow/signature/delete', {id: currValue.value}).then(res => {
      if (res.code === '1') {
        currValue.value = '';
        loadData();
        ElMessage.success("删除成功！")
      } else {
        ElMessage.error(res.message);
      }
    });
  });
};

watch(() => currValue.value, () => {
  modelValue.value = '';

  if (currValue.value) {
    const find = signList.value.find(item => item.id === currValue.value);
    if (find) {
      modelValue.value = find.signatureId;
    }
  }
});

onMounted(() => {
  loadData();
});
</script>

<style scoped lang="scss">
.flow-signature {
  width: 100%;
  display: flex;
  flex-direction: row;
  border-top: 1px solid #e1e1e1;
  padding: 20px 0;
  .label {
    margin-top: 7px;
    width: 120px;
    text-align: right;
    color: #333333;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex-shrink: 0;
    &:before {
      color: var(--el-color-danger);
      content: "*";
      margin-right: 4px;
    }
    .p-12 {
      padding-left: 13px;
    }
  }
  .container {
    display: flex;
    flex-direction: row;
    align-items: center;
    .image {
      width: 100px;
      height: 30px;
      img {
        max-width: 100%; /* 图片最大宽度不超过容器 */
        max-height: 100%; /* 图片最大高度不超过容器 */
        object-fit: contain; /* 等比例缩放图片 */
      }
    }
  }
}
</style>